.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  .col-12 {
    &-lg {
      @media (min-width: 1100px) {
        grid-column-start: span 12;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        grid-column-start: span 12;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        grid-column-start: span 12;
      }
    }
  }
  .col-11 {
    &-lg {
      @media (min-width: 1100px) {
        grid-column-start: span 11;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        grid-column-start: span 11;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        grid-column-start: span 11;
      }
    }
  }
  .col-10 {
    &-lg {
      @media (min-width: 1100px) {
        grid-column-start: span 10;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        grid-column-start: span 10;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        grid-column-start: span 10;
      }
    }
  }
  .col-9 {
    &-lg {
      @media (min-width: 1100px) {
        grid-column-start: span 9;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        grid-column-start: span 9;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        grid-column-start: span 9;
      }
    }
  }
  .col-8 {
    &-lg {
      @media (min-width: 1100px) {
        grid-column-start: span 8;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        grid-column-start: span 8;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        grid-column-start: span 8;
      }
    }
  }
  .col-7 {
    &-lg {
      @media (min-width: 1100px) {
        grid-column-start: span 7;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        grid-column-start: span 7;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        grid-column-start: span 7;
      }
    }
  }
  .col-6 {
    &-lg {
      @media (min-width: 1100px) {
        grid-column-start: span 6;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        grid-column-start: span 6;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        grid-column-start: span 6;
      }
    }
  }
  .col-5 {
    &-lg {
      @media (min-width: 1100px) {
        grid-column-start: span 5;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        grid-column-start: span 5;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        grid-column-start: span 5;
      }
    }
  }
  .col-4 {
    &-lg {
      @media (min-width: 1100px) {
        grid-column-start: span 4;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        grid-column-start: span 4;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        grid-column-start: span 4;
      }
    }
  }
  .col-3 {
    &-lg {
      @media (min-width: 1100px) {
        grid-column-start: span 3;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        grid-column-start: span 3;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        grid-column-start: span 3;
      }
    }
  }
  .col-2 {
    &-lg {
      @media (min-width: 1100px) {
        grid-column-start: span 2;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        grid-column-start: span 2;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        grid-column-start: span 2;
      }
    }
  }
  .col-1 {
    &-lg {
      @media (min-width: 1100px) {
        grid-column-start: span 1;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        grid-column-start: span 1;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        grid-column-start: span 1;
      }
    }
  }
  .col-0 {
    &-lg {
      @media (min-width: 1100px) {
        display: none;
        // grid-column-start: span 0;
      }
    }
    &-md {
      @media (max-width: 1100px) and (min-width: 900px) {
        display: none;
      }
    }
    &-sm {
      @media (max-width: 900px) {
        display: none;
      }
    }
  }
}
